<style scoped>
    .content-box {
        height: 100%;
        background: #ffffff;
        position: relative;
    }

    .top {
        height: 65px;
        background: #eaedf1;
        border-top: 1px solid #bbbbbb;
        border-bottom: 1px solid #bbbbbb;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        font-size: 18px;
        color: #3bc1a6;
        line-height: 70px;
        padding-left: 10px;
    }

    .top__item {
        margin-left: 30px;
    }

    .top__item--left {
        position: absolute;
        top: 22px;
        left: 25px;
        height: 27px;
        display: inline-block;
        width: 5px;
        background: #3bc1a6;
    }

    .content {
        position: absolute;
        left: 0;
        top: 65px;
        right: 0;
        bottom: 0;
        overflow: auto;
    }

    .button__status {
        width: 135px;
        height: 42px;
        line-height: 42px;
        display: inline-block;
        border: 1px solid #e4e4e4;
        border-radius: 5px;
        text-align: center;
        margin: 2px;
        cursor: pointer;
    }

    .button__status--active {
        color: #ffffff;
        background: #464c5a;
    }



    .search-box {
        width: 220px;
        height: 35px;
        border: 1px solid #e4e4e4;
        border-radius: 5px;
        position: relative;
        float: right;
        padding-right: 45px;
        background: #ffffff;
        overflow: hidden;
        margin-top: 15px;
        margin-right: 50px;
    }

    .search-box input {
        height: 35px;
        border: 0;
        padding: 0 5px;
        line-height: 35px;
        font-size: 14px;
        color: #000000;
        float: left;
    }

    .search-box__button {
        width: 45px;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        background: #55a5ed;
        display: flex;
        justify-content: center;
        align-items: center;

    }

    .dialog__title {
        font-size: 24px;
        line-height: 54px;
        text-align: center;
    }
</style>
<template>
    <div class="content-box">
        <div class="top">
            <span class="top__item--left"></span>
            <div>
                <span class="top__item">待审核：888</span>
                <span class="top__item">已通过：888</span>
                <span class="top__item">未通过：888</span>
                <span class="top__item">冻结：888</span>

                <div class="search-box">
                    <input type="text" v-model="po.keyword" placeholder="请输入名称或手机号">
                    <el-button type="primary" size="small" @click="reload" class="search-box__button"
                               icon="el-icon-search"></el-button>
                </div>
            </div>
        </div>
        <div class="content">
            <div>
                <span class="button__status" :class="{'button__status--active':po.params.auditStatus==0}"
                      @click="selectStatus('auditStatus',0)">待审核</span>
                <span class="button__status" :class="{'button__status--active':po.params.auditStatus==1}"
                      @click="selectStatus('auditStatus',1)">已通过</span>
                <span class="button__status" :class="{'button__status--active':po.params.auditStatus==-1}"
                      @click="selectStatus('auditStatus',-1)">未通过</span>
                <span class="button__status" :class="{'button__status--active':po.params.freezeStatus==1}"
                      @click="selectStatus('freezeStatus',1)">冻结</span>
            </div>
            <DataGrid ref="dg_in" url="/enter/list" :params="po.params">
                <el-table-column type="index" label="序号" width="50" align="center"
                                 cell-class-name="dg-header"></el-table-column>
                <el-table-column label="申请时间" width="155" align="center">
                    <template slot-scope="scope">
                        <div>{{getDateTimeString(scope.row.applyTime)}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="名称" width="200" align="center"></el-table-column>
                <el-table-column prop="operateName" label="姓名" width="150" align="center"></el-table-column>
                <el-table-column prop="concatQQ" label="QQ" width="110" align="center"></el-table-column>
                <el-table-column prop="mobile" label="手机号" width="110" align="center"></el-table-column>

                <el-table-column label="放单权限开关" width="120" align="center" key="power" v-if="po.params.auditStatus==1">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.addOrder" active-color="#13ce66"
                                   inactive-color="#ff4949" @change="changeAddOrder(scope.row)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="auditor" label="审核员" width="120" align="center" key="auditor"
                                 v-if="po.params.auditStatus==1"></el-table-column>
                <el-table-column prop="auditStatus" label="状态" width="120" align="center" key="auditStatus"
                                 v-if="po.params.auditStatus==0||po.params.auditStatus==-1">
                    <template slot-scope="scope">
                        <div v-if="scope.row.auditStatus==0">待审核</div>
                        <div v-if="scope.row.auditStatus==-1">拒绝</div>
                    </template>
                </el-table-column>

                <el-table-column prop="freezeStatus" label="状态" width="120" align="center" key="freezeStatus"
                                 v-if="po.freezeStatus==1">
                    <template slot-scope="scope">
                        <div v-if="scope.row.auditStatus==0">待审核</div>
                    </template>
                </el-table-column>

                <el-table-column prop="mobile" label="冻结时间" width="160" key="freezeTime" align="left"
                                 header-align="center"
                                 v-if="po.params.freezeStatus==1">
                    <template slot-scope="scope">
                        <div style="font-size: 12px;line-height: 14px">
                            开始:{{getDateTimeShort(scope.row.freezeStartTime)}}
                        </div>
                        <div style="line-height: 10px;">-----------------------</div>
                        <div v-if="scope.row.freezeEndTime!=-1" style="font-size: 12px;line-height: 14px">
                            结束:{{getDateTimeShort(scope.row.freezeEndTime)}}
                        </div>
                        <div v-else style="font-size: 12px;line-height: 14px">结束：永久</div>
                    </template>
                </el-table-column>
                <el-table-column label="详情" width="100" align="center">
                    <template slot-scope="scope">
                        <span class="dg_button" @click="toEnterInfo(scope.row)">查看</span>
                        <span class="dg_button" v-if="po.params.auditStatus==1" @click="showFreeze(scope.row.user._id)">冻结</span>
                        <span class="dg_button" v-if="po.params.auditStatus==-1">删除</span>
                        <span class="dg_button" v-if="po.params.freezeStatus==1" @click="unfreeze(scope.row.user._id)">解冻</span>
                    </template>
                </el-table-column>
            </DataGrid>
        </div>

        <el-dialog title="冻结确认" :visible.sync="vo.showFreezeDialog">
            <h2 class="dialog__title">确定要冻结此账号的发单权限吗？</h2>
            <el-form ref="form" :model="po.freeze" label-width="100px"
                     :rules="{freezeReason: [{ required: true, message: '请填写冻结理由', trigger: 'blur' }]}">
                <el-form-item label="冻结理由" prop="freezeReason">
                    <el-input v-model="po.freeze.freezeReason" type="textarea" rows="3"></el-input>
                </el-form-item>
                <el-form-item label="冻结时间">
                    <el-radio v-model="po.freeze.freezeTime" :label="1">一个月</el-radio>
                    <el-radio v-model="po.freeze.freezeTime" :label="2">两个月</el-radio>
                    <el-radio v-model="po.freeze.freezeTime" :label="3">三个月</el-radio>
                    <el-radio v-model="po.freeze.freezeTime" :label="-1">永久</el-radio>

                </el-form-item>
                <el-form-item label="是否发送消息">
                    <el-radio v-model="po.freeze.sendMessage" :label="true">是</el-radio>
                    <el-radio v-model="po.sendMessage" :label="false">否</el-radio>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="vo.showFreezeDialog=false">取 消</el-button>
                <el-button type="primary" @click="freeze">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import {getDateTimeString, getDateString} from 'utils'
    import bus  from 'utils/bus'
    export default {
        data(){
            return {
                po: {
                    params: {
                        auditStatus: 0,
                        freezeStatus: 0,
                        keyword: '',
                    },
                    freeze: {
                        user: '',
                        freezeReason: '',
                        freezeTime: 1,
                        sendMessage: true
                    }
                },
                vo: {
                    showFreezeDialog: false
                }
            }
        },
        computed: {},
        methods: {
            getDateString,
            getDateTimeString,
            getDateTimeShort(time){
                return getDateTimeString(time).substring(0, 16)
            },
            reload(){
                this.$refs.dg_in.reload()
            },
            selectStatus(field, value){
                this.po.params.auditStatus = null
                this.po.params.freezeStatus = 0
                this.po.params[field] = value
                this.reload()
            },
            toEnterInfo(data){
                window.sessionStorage.setItem("enterInfo", JSON.stringify(data))
                if (this.po.params.auditStatus == 0) {
                    this.$router.push("/user/enterAudit")
                } else {
                    this.$router.push("/user/enterInfo")
                }
            },
            showFreeze(user){
                this.po.freeze.user = user
                this.vo.showFreezeDialog = true
                this.$nextTick(()=> {
                    this.$refs.form.resetFields()
                })
            },
            freeze(){
                this.$refs.form.validate().then(valid=> {
                    if (valid) {
                        this.$post("/enter/freeze", this.po.freeze).then(data=> {
                            this.vo.showFreezeDialog = false
                            this.reload()
                        }).catch(err=> {
                            this.$message.error(err.message);
                        })
                    }
                }).catch(()=> {
                })
            },
            unfreeze(user){
                this.$confirm('确定要解冻吗?', '解冻确认----此解冻为手动，用于系统无法正常自动解冻', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$post("/enter/unfreeze", {user: user}).then(data=> {
                        this.reload()
                    }).catch(err=> {
                        this.$message.error(err.message);
                    })
                }).catch(() => {
                });
            },
            changeAddOrder(info){
                this.$confirm(`您确定要${info.addOrder ? "打开" : "取消"}用户${info.name}的放单权限吗?`, '操作确认', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$post("/enter/changeAddOrder", {id: info._id}).then(data=> {
                        this.reload()
                    }).catch(err=> {
                        this.$message.error(err.message);
                    })
                }).catch(() => {
                    info.addOrder = !info.addOrder
                });
            }
        },
        mounted(){
            bus.$on("reload", ()=> {
                try {
                    this.reload()
                } catch (e) {
                    console.info(e)
                }
            })
        },
        destroyed(){
            bus.$off("reload")
        },
        components: {},
        filters: {}
    }
</script>